import { defineStore } from "pinia";
import { computed,ref } from "vue";
import { useDemoStore } from "./demo";


export const useNumStore = defineStore('num',{
  // state   data
  // getters   computed
  // actions   methods
  state(){
    return {
      num:11,
      name:'ls',
      likes:['coding']
    }
  },
  getters:{
    double(){
      return this.num*2
    },
    threeNum(state){
      return state.num * 3
    },
    doublePlusOne(){
      return this.double+1
    },
    randomNum(state){
      return (params)=>state.num * params
    },
    nameAndLikes(){
      const demoStore = useDemoStore()
      return this.likes[0] + demoStore.getName
    }
  },
  actions:{
    numAdd(){
      return this.num++
    }
  }
})
// export const useNumStore = defineStore('num',()=>{
//   // state          ref data
//   // getters       computed
//   // actions       methods

//   const num = ref(10)
//   const double = computed(()=>num.value*2)
//   const numAdd = ()=>{
    
//     return num.value+=1
//   }

//   return {
//     num,double,numAdd
//   }
// })

// 1. npm install pinia
// 2. main.js 
// 2.1 import {createPinia} from 'pinia'
// 2.2 app.use(createPinia())


// 3. 声明一个 store
// 3.1 import { defineStore } from "pinia";
// 3.2 const useXXXStroe = defineStore(id,{})
// 3.2 const useXXXStroe = defineStore(id,()=>)


// 4. 使用
// 4.1 在组件中  import {useXXXStore} from '@/stores/xxx.js'
// 4.2 const xxStroe = useXXXStore()